window.onload=function () {
  //需求:
  //0 若localStorage中有shopcar,则将shopcar数据追加到购物车列表的最后
  //1 勾选全选时，所有商品均勾选，反之，取消勾选,且更新总数量、总金额
  //2 勾选商品左边的checkbox时，若此时所有商品均已勾选，则全选checkbox也要勾选，否则全选checkbox不勾选，且更新总数量、总金额
  //3 点击数量旁边的+/-按钮时，数量相应增减，但数量不能小于1,且旁边商品价格及下方总商品数量、总价格相应变化
  //4 直接修改数量时也会发生3 中的变化
  //5 清空购物车时所有商品删除，同时总数量、总金额归零
  
  var checkAlls = _$('.checkall');
  var carItemList = $('.cart-item-list');
  console.log(carItemList)
  //若localStorage中有shopcar,则将shopcar数据追加到购物车列表的最后
  var newItem = localStorage.getItem('shopcar');
  if(newItem){
    newItem = JSON.parse(newItem);
    var itemStr=`<div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" checked name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img style="width:80px;height:80px" src="${newItem.img}" alt="">
                            </div>
                            <div class="p-msg">${newItem.name}</div>
                        </div>
                        <div class="p-price">${newItem.price}</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="${newItem.num}">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥${(newItem.price.substr(1)*newItem.num).toFixed(2)}</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>`;
    console.log(carItemList)
    carItemList.innerHTML += itemStr;
  }

  var checks = _$('.j-checkbox');
  var carItems = _$(".cart-item");
  //通过checkall控制j-checkbox
  for(var i = 0;i<checkAlls.length;i++){
    checkAlls[i].onchange = function(){
      // 把checkall的checked属性值赋值给所有的j-checkbox及checkall
      for(var i=0;i<checkAlls.length;i++){
        checkAlls[i].checked = this.checked
      }
      for(var j=0;j<checks.length;j++){
        checks[j].checked = this.checked;
        if (this.checked) {
          carItems[j].classList.add('check-cart-item')
        } else {
          carItems[j].classList.remove("check-cart-item");
        }
      }
      getSum();
    }
  }
  //通过j-checkbox控制checkall,当所有j-checkbox均勾选时，checkall也勾选，否则checkall不勾选
  for(var i=0;i<checks.length;i++){
    checks[i].onchange = function(){
      if (_$(".j-checkbox:checked").length === checks.length) {
        checkAlls[0].checked = checkAlls[1].checked = true;
      } else {
        checkAlls[0].checked = checkAlls[1].checked = false; 
      }
      if (this.checked) {
        this.parentNode.parentNode.classList.add("check-cart-item");
      } else {
        this.parentNode.parentNode.classList.remove("check-cart-item");
      }
      getSum();
    }
  }

  //点击 +/- 让对应input框中数量 +1  -1,同时 更新 小计 中的商品金额
  var increments = _$('.increment');
  var decrements = _$('.decrement');
  for(var i=0;i<increments.length;i++){
    increments[i].onclick = function(){
      var n = this.parentNode.querySelector(".itxt").value;
      //n++时 会自动将n当成number不会有字符串拼接
      n++;
      this.parentNode.querySelector(".itxt").value = n;
      getSubSum(this, n);
    }
    decrements[i].onclick = function(){
       var n = this.parentNode.querySelector(".itxt").value;
      //n++时 会自动将n当成number不会有字符串拼接
      n--;
      if(n<1)return;
      this.parentNode.querySelector(".itxt").value = n;
      getSubSum(this, n);
    }
  }

  var itxts = _$('.itxt');
  var pSums = _$('.p-sum');
  console.log(itxts,pSums)

  //   直接改变数量时，小计也相应改变
  for(var i=0;i<itxts.length;i++){
    itxts[i].onchange = function(){
      if(this.value<1){
        this.value = 1;
      }
      var n = this.value;
      getSubSum(this, n);
    }
  }

  //计算小计
  function getSubSum(obj, n) {
    // var n = obj.val();
    //获取价格
    var p = obj.parentNode.parentNode.parentNode.querySelector(".p-price").innerHTML;
    p = p.substr(1);
    // console.log(p);
    //计算出新金额（价格*数量） 作为 小计 的内容
    obj.parentNode.parentNode.parentNode.querySelector(".p-sum").innerText=("￥" + (p * n).toFixed(2));
    getSum();
  }

  //   计算总数量及总金额
  console.log(itxts)
  getSum();
  function getSum() {
    var itxts = _$('.itxt');
    var pSums = _$('.p-sum');
    var count = 0; //总数量
    var amount = 0; //总金额
    //计算总数量,总金额,仅被勾选的才参与计算
    console.log(itxts)
    for(var i=0;i<itxts.length;i++){
      if(pSums[i].parentNode.querySelector('.j-checkbox').checked){
        count += parseInt(itxts[i].value);
        amount += parseFloat(pSums[i].innerText.substr(1));
      }
    }
    // 显示
    $(".amount-sum em").innerHTML = count;
    // 显示
    $(".price-sum em").innerHTML = "￥" + amount.toFixed(2);
  }

  //删除指定商品
  //删除单个商品
  var pActions = _$('.p-action');
  for(var i=0;i<pActions.length;i++){
    pActions[i].onclick = function(){
      this.parentNode.parentNode.removeChild(this.parentNode);
      if(_$(".j-checkbox:checked").length==0){
        for(var i in checkAlls){
          checkAlls[i].checked = false;
        }
      }
      getSum();
    }
  }
  //   删除勾选的商品
  $(".remove-batch").onclick = function () {
    var checked = _$(".j-checkbox:checked");
    for(var i=0;i<checked.length;i++){
      checked[i].parentNode.parentNode.parentNode.removeChild(checked[i].parentNode.parentNode);
    }
    if(_$(".j-checkbox:checked").length==0){
      for(var i in checkAlls){
        checkAlls[i].checked = false;
      }
    }
    getSum();
  };
  //   清空购物车
  $(".clear-all").onclick=function () {
    $(".cart-item-list").innerHTML = '';
    for(var i in checkAlls){
      checkAlls[i].checked = false;
    }
    getSum();
  };
};

function $(selector){
  return document.querySelector(selector);
}
function _$(selector){
  return document.querySelectorAll(selector);
}
